<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>category父子模版</title>
   
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/own.css"/>
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
    
    <style type="text/css">
    		.mui-table-view:after {
    			height: 0px;
    		}
    		
    		
    		/*图片显示的时候设置为自动 因为 从服务器来的图片大小相同*/
    		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
    			line-height: auto;
    			max-width: auto;
    			height: auto;
    			
    			border-top-right-radius: 4px; 
    			border-top-left-radius: 4px;
    		}
    		
    		.mui-table-view-cell {
    			margin-bottom: 10px;
    		}
    		.bgDiv {
    			border: 1px solid rgba(204,204,204,0.7); 
    			border-radius: 5px; 
    			background-color: white;
    			width: 100%;
    		}
    		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    			margin-top: 2px;
    			margin-bottom: 5px;
    			height: auto;
    		}
    		
    		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body p {
    			white-space:pre;
    			color: black;
    		}
    		
    		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body p.mui-ellipsis-2 {
    			height: 30px;
    		}
    		
    		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body .price-one {
    			margin-top: 12px;
    			float: left;
    			font-size: 1.1em;
    			margin-left: 7%;
    			color: red;
    			margin-bottom: 10px;
    		}
    		.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body .price-two {
    			margin-top: 12px;
    			float: right;
    			font-size: 1.1em;
    			margin-right: 7%;
    			text-decoration: line-through;
    		}
    </style>
</head>
<body class="own-gray-color">
	
	<header class="mui-bar mui-bar-nav own-header-hidden">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left own-left-nav-color"></a>
		<h1 class="mui-title">分类</h1>
	</header>	
	
	<div class="mui-content own-content-padding">
		<ul id="productsList" class="mui-table-view mui-grid-view own-gray-color" style="margin-top: 0px;">
			<!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
				<a href="#">
					<div class="bgDiv">
						<img class="mui-media-object" src="../img/bg.jpeg"/>
						<div class="mui-media-body">
							<p class="mui-ellipsis-2">解放军我皮肤降温哦放假我就饿假我就饿假我就饿假我就饿假我就饿</p>
							<p class="price-one">¥99.0</p>
							<p class="price-two">¥188.0</p>
						</div>
					</div>
				</a>
			</li>-->
		</ul>				
	</div>
	
	<script src="../js/mui.min.js" charset="UTF-8"></script>
	<script src="../js/ajax.js" charset=""></script>
	<script src="../js/own.js" charset="UTF-8"></script>
	
	<script type="text/javascript" charset="UTF-8">
		mui.init({
			swipeBack:true
		});
	
		var datalist = [];//数据数组
		var listHtml = [];//listhtml数组
		var productsList;
		var categorydetailWebview;//当前webview
		mui.plusReady(function(){
			categorydetailWebview = plus.webview.currentWebview();
			productsList = document.getElementById('productsList');
			
			//当reday加载之后，因为每次都要重新load所以每次都会调用到这边。
			//向父页面发送消息获取productID
			mui.fire(categorydetailWebview.parent(),'getCategoryID',{});
			//紧接着获取父页面返回的productid事件
			window.addEventListener('postCategoryID',function(e){
				console.log('收到返回的productID事件，id为'+e.detail.categoryID);
				//通过id请求数据
				ajax_get_product_list({
					category_id:e.detail.categoryID,
					page_size:'12',
					page_num:'1',
					status:'normal'
				});
			},false);
			
			//监听页面hide事件，当页面返回的时候将里面的数据清空
			categorydetailWebview.addEventListener('hide',function(){
				//将数据清空以及主要显示列表页面的innerhtml设置为''
				productsList.innerHTML = '';
				datalist = [];
				
			},false);
			
			//添加每个item点击的监听事件
			mui('#productsList').on('tap','a',function(){
				var item = this;
				var itemID = this.getAttribute('href');
				var indexWebview = plus.webview.getWebviewById('HBuilder');
				var anishow = getaniShow();
				//弹入分类商品列表
				mui.fire(indexWebview,'newWebView',{
					id:'Home/product-detail-needtem.html',
					href:'Home/product-detail-needtem.html',
					aniShow:anishow,
					title:'商品详情',
					isBars:false,
					barsIcon:'',
					product_id:itemID,
				});
			});
		});
		
		//成功查询分类列表下的数据
		function productlistSuccess(data){
			if (data.code == '000000') {
				mui.each(data.product_list,function(index,item){
					var dataItem = {
						detail_image_url:item.detail_image_url,
						product_price:item.product_price,
						product_name:name,
						product_id:item.product_id
					};
					datalist.push(dataItem);
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-media mui-col-xs-6';
					li.innerHTML = '<a href="'+item.product_id+'"><div class= "bgDiv"><img class="mui-media-object" src="http://file.huihoo.com'+item.detail_image_url+'"/><div class="mui-media-body"><p class="mui-ellipsis-2">'+item.product_name+'</p><p class="price-one">¥'+item.product_price.default_price+'</p><p class="price-two">¥'+item.product_price.list_price+'</p></div></div></a>';
					productsList.appendChild(li);
				});
			}else {
				mui.toast(data.message);
			}
		}
		
	</script>
</body>
</html>